/*
* @Author: gpj
* @Date: 2023-06-10 10:31:19
* @LastEditors: Yejing
* @LastEditTime: 2023-06-24 16:40:07
* @Description: desc
*/
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="search.title" :navType='search.navType' :navPlaceholder='search.navPlaceholder'
				:navThmen='search.navThmen' @focusEvent='focusEvent' @switchSvgEvent='switchSvgEvent'>
			</c-navigation-bar>

			<!-- 修改 -->
			<view class="container-box form-modify">
				<view class="paragraph">
					{{$t('storeManagement.storeDepositText1')}}
				</view>
				<view class="paragraph">
					{{$t('storeManagement.storeDepositText2')}}
				</view>
				<view class="title">
					{{$t('storeManagement.storeDepositText3')}}
				</view>
				<view class="paragraph">
					{{$t('storeManagement.storeDepositText4')}}
				</view>
				<view class="title">
					{{$t('storeManagement.storeDepositText5')}}
				</view>
				<view class="paragraph">
					{{$t('storeManagement.storeDepositText6')}}
				</view>
				<view class="paragraph" style="			text-indent:0">
					{{$t('storeManagement.storeDepositText7')}}
				</view>
			</view>

			<view class="bootom">
				<view @click="openPop()" class="bootomBtn">
					{{$t('storeManagement.EnrollmentDeposit')}}
				</view>
				<view @click="skipShow=true" class="bootomBtn" style="color: #000; background-color: #fff; margin-top: 10px;">
					{{$t('storeManagement.skip')}}
				</view>
			</view>
			<!-- 支付保证金-->
			<u-popup v-model="amountShow" height="500rpx" border-radius="32" class="exchange-rate-popup" :round="100"
				mode="bottom">
				<view class="popup-main">
					<p class="title">{{$t('storeManagement.EnrollmentDeposit')}}</p>
					<titleInput :paddingLeft="'40rpx'" disabled v-model="amount" focusColor="#2934D0" :title="`${$t('recharge.amount')}`"
						type='number'>
						<view class="leftIcon" slot="left-icon">
							$
						</view>
					</titleInput>
					<!-- 			<view class="rechargelist">
						<view class="rechargelist-box" v-for='(item,index) in rechargelist' :class="amount==item?'select':''"
							:key='index' @click="amount=item">
							<view class="">
								${{item}}
							</view>
						</view>
					</view>
			 -->
					<button style="position: fixed;bottom: 20rpx;left: 20rpx;right: 20rpx;" class="" :disabled="amount==0" @click="clickNowPay"
						type="default">{{$t('order.immediatePayment')}}</button>
				</view>
			</u-popup>

			<!-- 跳过-->
			<u-popup v-model="skipShow" width="90%" border-radius="32" class="exchange-rate-popup" :round="100" mode="center">
				<view class="popup-main">
					<view class="skipTips">
						{{$t('storeManagement.skipTips')}}
					</view>
					<button class="submit-exchange-rate" @click="tostore()"
						type="default">{{$t('storeManagement.gotIt')}}</button>
				</view>
			</u-popup>


		</c-layout>


		<inputPayPassword @finish="finish" :payPwdPopShow.sync="showPassWorld" :title="pswTitle" :amount="amount"
			:maxlength="6" @close="cancel"></inputPayPassword>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {

			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('storeManagement.storeDeposit')
				},
				amount: '',
				amountShow: false,
				skipShow: false,
				// rechargelist: [
				// 	200, 500, 1000,
				// 	2000, 5000, 10000
				// ],

				pswTitle: this.$t('storeManagement.EnrollmentDeposit'),

				count: 1,
				value: 0,
				range: [],
				show: false,
				showPassWorld: false,

			}
		},
		onLoad() {



		},
		methods: {
      //点击立即支付
      clickNowPay() {
        //判断余额是否大于保证金 否则跳转到充值界面
        //查询余额
        uni.$http.get(`/app/anchor/lives/gift/exchangeGold`).then((res) => {
          console.log('账户余额', res);
          this.accountMoney = res.data.userBalance;
          if (res.data.userBalance >= this.amount) {
            this.showPassWorld = true
          } else {
						this.showToast(this.$t('moneyManagement.notFonds'))
						setTimeout(() => {
						//到充值页
						uni.navigateTo({
						  url: '/pages/recharge/recharge',
						  "animationType": "slide-in-right",
						  "animationDuration": 300
						})
						}, 1500)
          
          }
        });
      },
			tostore() {
				uni.navigateTo({
					url: "/pages/storyType/storeManagement"
				})
			},
			openPop() {
				this.amountShow = true
				this.$u.get('/app/shop/getPayableEarnestMoney').then(res => {
					this.amount = res.data

				})
			},
			cancel() {
				this.showPassWorld = false
			},
			finish(e) {
				this.$u.post(`/app/shop/pay/earnestMoney`, {
					password: e,
				}).then((res) => {
					this.showToast(this.$t('storeManagement.EnrollmentDeposit'))
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/storyType/storeManagement'
						})
					}, 1500)

				});
			},
			showToast(title) {
				this.$refs.uToast.show({
					title: title,
					type: 'default '
				});
			},

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {}
	}
</script>

<style lang="scss">
	.modify-page {
		uni-view.container-box.form-modify {
			height: 73vh;
			overflow: auto;
		}

		.paragraph {
			text-indent: 2em;
			color: #1B1D29;
			font-size: 28rpx;
			font-weight: 400;
			font-family: HarmonyOS Sans-Regular;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}

		.title {
			font-size: 36rpx;
			color: #1B1D29;
			font-weight: 700;
			font-family: HarmonyOS Sans-Bold;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}
	}

	.bootom {
		position: fixed;
		bottom: 10px;
		left: 15px;
		right: 15px;

		.bootomBtn {
			height: 60px;
			background: #2934D0;
			border-radius: 10px 10px 10px 10px;
			opacity: 1;
			text-align: center;
			line-height: 60px;
			color: #fff;
		}
	}

	.rechargelist {
		display: flex;
		flex-wrap: wrap;
		margin: 32rpx 0;
		justify-content: space-between;

		.rechargelist-box {
			width: 200rpx;
			display: inline-block;
			margin: 10px 0;
			height: 75px;
			text-align: center;
			line-height: 75px;
			color: #000;
			font-family: Helvetica-Helvetica;
			font-size: 16px;
			mix-blend-mode: normal;
			border-radius: 12px;
			background: rgba(244, 244, 244, 1);
		}

		.select {
			border: 1px solid #2934D0;
		}
	}

	.popup-main {
		padding: 40rpx;
		height: 100%;
		// border-start-start-radius: 20rpx;
		// border-start-end-radius: 20rpx;

		.title {
			color: rgba(30, 36, 50, 1);
			font-family: PingFangSC-Heavy;
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 60rpx;
		}

		>uni-scroll-view {
			height: calc(100% - 232rpx) !important;
		}

		.u-radio-group {
			width: 100%;

			.u-radio {
				width: 100% !important;
				margin-top: 56rpx;

				/deep/ .u-radio__icon-wrap--circle {
					border-radius: 100%;
					border: 1px solid #000;
				}
			}
		}

		.radio-item {

			.exchange-rate {
				padding-left: 20rpx;
			}
		}

		.skipTips {
			font-size: 15px;
			font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
			font-weight: 400;
			color: #666666;
			margin: 60rpx 20rpx;
			line-height: 21px;

		}

		>.submit-exchange-rate {
			width: 200px;
			height: 40px;
			background: #2934D0;
			border-radius: 20px 20px 20px 20px;
			opacity: 1;
			font-size: 16px;
			font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
			font-weight: 400;
		}
	}
</style>